<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>幸运用户</title>
	<meta name="keywords" content="翻倍花，O2O，第三方推广，服务平台">
    <meta name="description" content="翻贝网致力于打造国内最具公信力的第三方推广和服务平台">
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/h5.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
	<style>
		.lucky_outer{padding: 1.5rem 0.75rem 0.5rem;position: relative;}
		.lucky_background{width: 100%;position: absolute;top: 0;left: 0;}
		.lucky_rule{background: url({{env('IMAGE_DOMAIN')}}images/h5/lucky_user/rule.png) 0 0 no-repeat;background-size: 100%;height: 5.8rem;padding-top: 0.55rem;margin-top: 0.4rem;}
		.lucky_people{width: 8.8rem;border: 1px solid #9955c6;border-radius: 0.2rem;margin: 0 auto;margin-bottom: 0.3rem;}
.lucky_header{font-size: 0.36rem;overflow: hidden;}
.lucky_header ul{width: 8.67rem;margin: 0 auto;padding: 0 0.1rem;overflow: hidden;height: 3.6rem;}
.lucky_header ul li{overflow: hidden;float: left;}
.lucky_header ul li .luckyuser_num{float: left;}
.lucky_header ul li p{float: left;margin-left: 0.65rem;overflow: hidden;}
.lucky_header ul li p span{float: left;margin-left: 0.1rem;}
.lucky_header ul li p .lucky_shop{max-width: 3.3rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.lucky_rule h2{font-size: 0.44rem;color: #9955c6;text-align: center;}
.lucky_rule ul{width: 8rem;margin: 0 auto;}
/*.lucky_rule ul li{margin: 0.05rem 0;}*/
.lucky_rule ul div{font-size: 0.34rem;color: #595959;}
.lucky_rule ul p{font-size: 0.28rem;color: #a6a5a5;}
.lucky_100yaun{width: 8.8rem;height: 3.23rem;margin: 0.4rem 0 0 0.25rem;}
.lucky_people h2{font-size: 0.48rem;color: #828282;text-align: center;margin: 0.25rem 0;}
.lucky_people ul li{overflow: hidden;width: 7.63rem;margin: 0 auto 0.15rem;}
.lucky_people ul li span{font-size: 0.34rem;color: #828282;float: left;margin-left: 0.1rem;}
.lucky_people p{font-size: 0.36rem;color: #9955c6;text-align: center;margin: 0.2rem 0 0.4rem;}
.lucky_people .lucky_shopname{max-width: 1.1rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	</style>
</head>
<body>
	<img class="lucky_background" src="{{env('IMAGE_DOMAIN')}}images/h5/lucky_user/background.jpg" alt="">
	<div class="lucky_outer">
		<header class="lucky_header">
			<ul class="lucky_peoples">
			@foreach($lists as $list)
				<li>
					<span class="luckyuser_num">{{$list['mobile']}}</span>
					<p><span>在</span><span class="lucky_shop" style="max-width: 2.5rem;">{{$list['shopname']}}</span>
					<span>消费了</span><span class="lucky_money">{{$list['actualamount']}}</span></p>
				</li>
	        @endforeach
			</ul>
		</header>
		<section class="lucky_rule">
			<h2>活动规则</h2>
			<ul>
				<li>
					<div>活动规则</div>
					<p>翻贝网后台会在当天使用翻贝网买单的用户群中，抽取三位幸运用户，每位赠送两张价值100元的现金礼券，用户凭此券即可到指定商家进行消费。</p>
				</li>
				<li>
					<div>活动时间</div>
					<p>2016年11月30日止</p>
				</li>
				<li>
					<div>现金券说明</div>
					<p>使用本券消费，没有任何限制。翻贝网会以电话通知的形式告知用户，用户接到电话后，到指定地址领取。</p>
				</li>
				<li>
					<div>领取地址</div>
					<p>南昌市红谷滩区万达中心B3写字楼26楼翻贝网科技有限公司。</p>
				</li>
			</ul>
		</section>
		<img class="lucky_100yaun" src="{{env('IMAGE_DOMAIN')}}images/h5/lucky_user/100yuan.jpg" alt="">
		<section class="lucky_people">
			<h2>近期获奖名单</h2>
			<ul>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">183****6636</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">152****7186</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">150****1882</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">150****5891</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">151****2967</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">182****3942</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">152****3119</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">136****6984</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">187****2769</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
				<li>
					<span>恭喜</span>
					<span style="width: 2.1rem;">181****3446</span>
					<span>获得</span>
					<span class="lucky_shopname">贝思塔</span>
					<span>100元现金券2张</span>
				</li>
			</ul>
			<p>具体获奖信息以翻贝网官方电话通知为准</p>
		</section>
	</div>
	<script src="{{env('JS_DOMAIN')}}/js/jquery-1.11.1.min.js?v={{env('JS_VERSION')}}"></script>
	<script>
		$(function () {
			$(".lucky_background").height($('body').height());
			if($(window).width()<640){   //屏幕小于640的手机
				$(".lucky_rule ul li").css({'margin': '0.05rem 0'});
				$(".lucky_rule ul div").css({'font-size': '0.34rem'});
				$(".lucky_rule").css({'height': '6rem','padding-top':'0.35rem'});
				$(".lucky_header").css({'height': 80});
				$(".lucky_header ul").css({'height': 80});
				$(".lucky_peoples li").css({'height': 20});
			}else{           			//屏幕大于640的手机
				$(".lucky_rule ul li").css({'margin': '0.15rem 0'});
				$(".lucky_rule ul div").css({'font-size': '0.36rem','margin-bottom':'0.1rem'});
				$(".lucky_rule").css({'height': '5.8rem','padding-top':'0.55rem'});
				$(".lucky_header").css({'height': 240});
				$(".lucky_header ul").css({'height': 240});
				$(".lucky_peoples li").css({'height': 60});
			}
			var lish=$(".lucky_peoples li").height();
			var lislength=$(".lucky_peoples li").length;
			$(".lucky_peoples").height(lish*lislength);
			var x=0;
			setInterval(function(){
				x++;
				if(x == lislength-4){
					$(".lucky_header").scrollTop(0);
					x=1;
				}
				$(".lucky_header").stop().animate({scrollTop:lish*x},1000)
				// }
			},2000)
		})
	</script>
</body>
</html>